import React, {Component} from 'react'
import ReactDOM from 'react-dom'

// props深入
// children属性,在最后面的时候<App>使用双标签,即可获得了children属性
const App = props => {
    console.log(props)
    props.children()
    return (
        <div>
            <h1>组件子节点:</h1>
        </div>
    )
}

ReactDOM.render(
    <App>
        {
            () => console.log('这是一个function')
        }
    </App>, document.getElementById('root'))




// children为jsx或组件
// const Test= () => <button>我是点击</button>
// // {return (<button>我是点击</button>)}

// const App = props => {
//     console.log(props)
//     return (
//         <div>
//             <h1>组件子节点:</h1>
//             {props.children}
//         </div>
//     )
// }

// ReactDOM.render(<App>
//         {/* <p>我是子节点,是一个p标签</p> */}
//         <Test />
//     </App>, document.getElementById('root'))


// 文本节点
// const App = props => {
//     console.log(props)
//     return (
//         <div>
//             <h1>组件子节点:</h1>
//             {props.children}
//         </div>
//     )
// }

// ReactDOM.render(<App>我是子节点</App>, document.getElementById('root'))